<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>aaa</title>
    <style>
        #allmap2 {
            position: relative;
            filter: invert(100%);
        }

        /* #allmap:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background:#000;
        z-index: 1;
    }*/
    </style>
</head>

<body>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.1/vconsole.min.js"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=xr3BUhN4yhu1q3qVoO6h8gFhP3FvQTVi"></script>
    <div id="allmap" class="aroundMap" style="height: 500px"></div>
    <div id="allmap2" class="aroundMap" style="height: 500px"></div>
    <script>
        var GPS = {
            PI: 3.14159265358979324,
            x_pi: 3.14159265358979324 * 3000.0 / 180.0,
            delta: function (lat, lon) {

                // Krasovsky 1940  

                // a = 6378245.0, 1/f = 298.3  

                // b = a * (1 - f)  

                // ee = (a^2 - b^2) / a^2;  

                var a = 6378245.0; //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。  

                var ee = 0.00669342162296594323; //  ee: 椭球的偏心率。  

                var dLat = this.transformLat(lon - 105.0, lat - 35.0);

                var dLon = this.transformLon(lon - 105.0, lat - 35.0);

                var radLat = lat / 180.0 * this.PI;

                var magic = Math.sin(radLat);

                magic = 1 - ee * magic * magic;

                var sqrtMagic = Math.sqrt(magic);

                dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);

                dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);

                return { 'lat': dLat, 'lon': dLon };

            },



            //WGS-84 to GCJ-02  

            gcj_encrypt: function (wgsLat, wgsLon) {

                if (this.outOfChina(wgsLat, wgsLon))

                    return { 'lat': wgsLat, 'lon': wgsLon };

                var d = this.delta(wgsLat, wgsLon);

                return { 'lat': wgsLat + d.lat, 'lon': wgsLon + d.lon };

            },

            //GCJ-02 to WGS-84  

            gcj_decrypt: function (gcjLat, gcjLon) {

                if (this.outOfChina(gcjLat, gcjLon))

                    return { 'lat': gcjLat, 'lon': gcjLon };

                var d = this.delta(gcjLat, gcjLon);

                return { 'lat': gcjLat - d.lat, 'lon': gcjLon - d.lon };

            },

            //GCJ-02 to WGS-84 exactly  

            gcj_decrypt_exact: function (gcjLat, gcjLon) {

                var initDelta = 0.01;

                var threshold = 0.000000001;

                var dLat = initDelta, dLon = initDelta;

                var mLat = gcjLat - dLat, mLon = gcjLon - dLon;

                var pLat = gcjLat + dLat, pLon = gcjLon + dLon;

                var wgsLat, wgsLon, i = 0;

                while (1) {

                    wgsLat = (mLat + pLat) / 2;

                    wgsLon = (mLon + pLon) / 2;

                    var tmp = this.gcj_encrypt(wgsLat, wgsLon)

                    dLat = tmp.lat - gcjLat;

                    dLon = tmp.lon - gcjLon;

                    if ((Math.abs(dLat) < threshold) && (Math.abs(dLon) < threshold))

                        break;

                    if (dLat > 0) pLat = wgsLat; else mLat = wgsLat;

                    if (dLon > 0) pLon = wgsLon; else mLon = wgsLon;

                    if (++i > 10000) break;

                }

                //console.log(i);  

                return { 'lat': wgsLat, 'lon': wgsLon };

            },

            //GCJ-02 to BD-09  

            bd_encrypt: function (gcjLat, gcjLon) {

                var x = gcjLon, y = gcjLat;

                var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi);

                var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi);

                bdLon = z * Math.cos(theta) + 0.0065;

                bdLat = z * Math.sin(theta) + 0.006;

                return { 'lat': bdLat, 'lon': bdLon };

            },

            //BD-09 to GCJ-02  

            bd_decrypt: function (bdLat, bdLon) {

                var x = bdLon - 0.0065, y = bdLat - 0.006;

                var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi);

                var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi);

                var gcjLon = z * Math.cos(theta);

                var gcjLat = z * Math.sin(theta);

                return { 'lat': gcjLat, 'lon': gcjLon };

            },

            //WGS-84 to Web mercator  

            //mercatorLat -> y mercatorLon -> x  

            mercator_encrypt: function (wgsLat, wgsLon) {

                var x = wgsLon * 20037508.34 / 180.;

                var y = Math.log(Math.tan((90. + wgsLat) * this.PI / 360.)) / (this.PI / 180.);

                y = y * 20037508.34 / 180.;

                return { 'lat': y, 'lon': x };

                /*
                
                        if ((Math.abs(wgsLon) > 180 || Math.abs(wgsLat) > 90))
                
                            return null;
                
                        var x = 6378137.0 * wgsLon * 0.017453292519943295;
                
                        var a = wgsLat * 0.017453292519943295;
                
                        var y = 3189068.5 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
                
                        return {'lat' : y, 'lon' : x};
                
                        //*/

            },

            // Web mercator to WGS-84  

            // mercatorLat -> y mercatorLon -> x  

            mercator_decrypt: function (mercatorLat, mercatorLon) {

                var x = mercatorLon / 20037508.34 * 180.;

                var y = mercatorLat / 20037508.34 * 180.;

                y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.)) - this.PI / 2);

                return { 'lat': y, 'lon': x };

                /*
                
                        if (Math.abs(mercatorLon) < 180 && Math.abs(mercatorLat) < 90)
                
                            return null;
                
                        if ((Math.abs(mercatorLon) > 20037508.3427892) || (Math.abs(mercatorLat) > 20037508.3427892))
                
                            return null;
                
                        var a = mercatorLon / 6378137.0 * 57.295779513082323;
                
                        var x = a - (Math.floor(((a + 180.0) / 360.0)) * 360.0);
                
                        var y = (1.5707963267948966 - (2.0 * Math.atan(Math.exp((-1.0 * mercatorLat) / 6378137.0)))) * 57.295779513082323;
                
                        return {'lat' : y, 'lon' : x};
                
                        //*/

            },

            // two point's distance  

            distance: function (latA, lonA, latB, lonB) {

                var earthR = 6371000.;

                var x = Math.cos(latA * this.PI / 180.) * Math.cos(latB * this.PI / 180.) * Math.cos((lonA - lonB) * this.PI / 180);

                var y = Math.sin(latA * this.PI / 180.) * Math.sin(latB * this.PI / 180.);

                var s = x + y;

                if (s > 1) s = 1;

                if (s < -1) s = -1;

                var alpha = Math.acos(s);

                var distance = alpha * earthR;

                return distance;

            },

            outOfChina: function (lat, lon) {

                if (lon < 72.004 || lon > 137.8347)

                    return true;

                if (lat < 0.8293 || lat > 55.8271)

                    return true;

                return false;

            },

            transformLat: function (x, y) {

                var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));

                ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;

                ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;

                ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;

                return ret;

            },

            transformLon: function (x, y) {

                var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));

                ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;

                ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;

                ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;

                return ret;

            }

        };
    </script>
    <script type="text/javascript">
        new VConsole()
        function getWGS84Location() {
            return new Promise((resolve, reject) => {
                navigator.geolocation.getCurrentPosition(position => {
                    const { accuracy, altitude, latitude, longitude, speed } = position.coords
                    // console.log(position.toJSON())
                    console.log('WGS84Location=>:', { accuracy, altitude, latitude, longitude, speed })
                    // console.log('transform=>', GPS.gcj_encrypt(latitude, longitude))
                    resolve({
                        accuracy,
                        altitude,
                        latitude,
                        longitude,
                        speed
                    })
                }, reject)
            })
        }

        function WGS84TranslateGCJ02(WGS84Location) {
            const wgs84Point = new BMap.Point(WGS84Location.longitude, WGS84Location.latitude)
            var convertor = new BMap.Convertor();
            return new Promise(resolve => {
                convertor.translate([wgs84Point], 1, 5, function (resPoint) {
                    if (resPoint && resPoint.points && resPoint.points.length > 0) {
                        lng = resPoint.points[0].lng;
                        lat = resPoint.points[0].lat;
                    }
                    const point = new BMap.Point(lng, lat);
                    const geo = new BMap.Geocoder();
                    geo.getLocation(point, (res) => {
                        // renderMap(allmap, res.point)
                        console.log('GCJ02Location=>:', res.point)
                        resolve(res.point)
                    });
                });
            })
        }

        function renderMap(mapID, point) {
            var map = new BMap.Map(mapID);
            // var myIcon = new BMap.Icon("./images/empty_block.png", new BMap.Size(1, 1));
            // var marker = new BMap.Marker(point  , { icon: myIcon }  );
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            // var label = new BMap.Label('<div class="name">帕克公馆<i class="arrow"></i></div>', { offset: new BMap.Size(7, 0) });
            // marker.setLabel(label);
            map.centerAndZoom(point, 18);
            var local = new BMap.LocalSearch(map, {
                renderOptions: { map: map },
                onSearchComplete: function (result) {
                    if (local.getStatus() === BMAP_STATUS_SUCCESS) {
                        // console.log(result.Ar[0]);
                    }
                }
            });
            var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT }); // 左上角，添加比例尺
            var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
            map.addControl(top_left_control);
            map.addControl(top_left_navigation);
            return local;
        }
        getWGS84Location().then(wgs84locaiotn => {
            const { lat, lon: lng } = GPS.gcj_encrypt(wgs84locaiotn.latitude, wgs84locaiotn.longitude)
            // console.log(lat,lng)
            // return new BMap.Point(lng, lat);
            return WGS84TranslateGCJ02(wgs84locaiotn)
            
        }).then(point => {
            // console.log(res.point)
            renderMap(allmap, point)
        }).catch(e => {
            for (let key in e) {
                console.log(key, ':', e[key])
            }
        })
    </script>

</body>

</html>